<template>
<div>
  <div class="nav">
    <mt-button size="small" @click.native.prevent="active = 'tab-container1'">次数</mt-button>
    <mt-button size="small" @click.native.prevent="active = 'tab-container2'">能量监测</mt-button>
    <mt-button size="small" @click.native.prevent="active = 'tab-container3'">破坏类型</mt-button>
    <mt-button size="small" @click.native.prevent="active = 'tab-container4'">程度</mt-button>
    <mt-button size="small" @click.native.prevent="active = 'tab-container5'">台站工况</mt-button>
  </div>

  <div class="page-tab-container">
    <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>

      <mt-tab-container-item id="tab-container1">
        <!-- 发生次数vxe-table组件 -->
        <vxe-table
          border
          resizable
          show-footer
          ref="xTable"
          height="800"
          align="center"
          :data="tableData">

          <vxe-colgroup title="发生次数统计">
            <vxe-column field="a" title="日期"  width="50%"></vxe-column>
            <vxe-column field="b" title="发生次数" width="50%"></vxe-column>
          </vxe-colgroup>
        </vxe-table>
      </mt-tab-container-item>

      <mt-tab-container-item id="tab-container2">
        <!-- 能量检测vxe-table组件 -->
        <vxe-table
          border
          resizable
          show-footer
          ref="xTable"
          height="800"
          align="center"
          :data="tableData">
          <vxe-colgroup title="能量监测">
            <vxe-table-column field="a" title="日期"  min-width="180px"></vxe-table-column>
            <vxe-table-column field="c" title="能量大小" min-width="180px"></vxe-table-column>
          </vxe-colgroup>
        </vxe-table>
      </mt-tab-container-item>

      <mt-tab-container-item id="tab-container3">
        <!-- 破坏类型vxe-table组件 -->
        <vxe-table
          border
          resizable
          show-footer
          ref="xTable"
          height="800"
          align="center"
          :data="tableData">
          <vxe-colgroup title="破坏类型">
            <vxe-table-column field="a" title="日期" min-width="90px"></vxe-table-column>
            <vxe-table-column field="d" title="剪切" min-width="90px"></vxe-table-column>
            <vxe-table-column field="e" title="张拉" min-width="90px"></vxe-table-column>
            <vxe-table-column field="f" title="混合" min-width="90px"></vxe-table-column>
          </vxe-colgroup>
        </vxe-table>
      </mt-tab-container-item>

      <mt-tab-container-item id="tab-container4">
        <!-- vxe-table严重程度组件 -->
        <vxe-table
          border
          resizable
          show-footer
          ref="xTable"
          height="800"
          align="center"
          :data="tableData">
          <vxe-colgroup title="严重程度">
            <vxe-column field="a" title="日期" min-width="90px"></vxe-column>
            <vxe-column field="g" title="严重" min-width="90px"></vxe-column>
            <vxe-column field="h" title="一般" min-width="90px"></vxe-column>
            <vxe-column field="i" title="轻微" min-width="90px"></vxe-column>
          </vxe-colgroup>
        </vxe-table>
      </mt-tab-container-item>

      <mt-tab-container-item id="tab-container5">
        <!-- 台站工况vxe-table组件 -->
        <vxe-table
          border
          resizable
          show-footer
          ref="xTable"
          height="800"
          align="center"
          :data="tableData">
          <vxe-colgroup title="台站工况">
            <vxe-column field="a" title="日期" min-width="72px"></vxe-column>
            <vxe-column field="j" title="盘符" min-width="72px"></vxe-column>
            <!--              <vxe-column field="k" title="位置"></vxe-column>-->
            <vxe-column field="l" title="状态" min-width="72px"></vxe-column>
            <vxe-column field="m" title="存储" min-width="72px"></vxe-column>
            <vxe-column field="n" title="网速" min-width="72px"></vxe-column>
          </vxe-colgroup>
        </vxe-table>
      </mt-tab-container-item>

    </mt-tab-container>
  </div>

</div>
</template>

<script>
export default {
  name: "Table",
  data(){
    return{
      active:'tab-container1',
      tableData:[]
    }
  },
  created() {
    this.TabLoadList()
  },
  methods:{
    TabLoadList(){
      const list=[];
      for (let index=0;index<15;index++){
        list.push({
          a:'2021-04-1'+index,
          b:index,
          c:'10'+'^'+index+'J',
          d:index,
          e:index,
          f:index,
          g:index,
          h:index,
          i:index,
          j:index,
          // k:index,
          l:index,
          m:index,
          n:index
        });
        this.tableData=list;
      }
    },
    // footerMethod({}){
    //   return[]
    // }
  }
};
</script>

<style scoped>
.nav{
  padding: 10px 5px 10px 15px;
  /*margin: 0 auto;*/
  width: 100%;
  margin: 0 auto;
}
</style>